<%--
  Created by IntelliJ IDEA.
  User: ly
  Date: 2023/3/8
  Time: 09:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>这是一个Demo</title>
    <style>
<%--   选择器有优先级， id >  class > 标签选择器   --%>
      #errorHint{
        width: 306px;
        height: 20px;
        margin-right: auto;
        margin-left: auto;
        background-color: #FCECEB;
        border: solid 1px #F3CEC7;
        margin-bottom: 10px;
        color: #D24844;
        font-size: 12px;
        display: flex;
        align-items: center;
        visibility: hidden;
        background-image: url("./src/pwd-icons-new.png");
        background-position: -96px -48px;
        background-repeat: no-repeat;
        overflow: hidden;
        padding-left:45px;
        box-sizing: border-box;
      }

      input{
        text-decoration: none;
        /*去除input标签的默认边框*/
        border: none;
      }
      input:focus{
        outline: none;
      }
      .nameDiv , .psdDiv{
        width: 304px;
        height: 38px;
        border: solid #BDBDBD 1px;
        display: flex;
        flex-direction:row-reverse;
        margin-left: auto;
        margin-right: auto;
      }
      .psdDiv{
        margin-top: 20px;
      }
      .nameSrc{
        width: 38px;
        height: 38px;
        background-image: url("./src/pwd-icons-new.png");
        border-right: solid 1px #BDBDBD;
      }
      .nameIn, .psdIn{
        width: 266px;

      }
      .psdSrc{
        width: 38px;
        height: 38px;
        background-image: url("./src/pwd-icons-new.png");
        background-position: -48px 0px;
        border-right: solid 1px #BDBDBD;
      }
      .submit{
        width: 304px;
        height: 38px;
        background-color: #D24844;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #BB3A35;
        margin-top: 30px;
      }
      a{
        display: block;
        height: 38px;
        width: 304px;
        color: white;
        text-decoration: none;
        align-content: center;
        /*使文本左右居中*/
        text-align: center;
        /*设置字体的高度，使整个文本上下居中*/
        line-height: 38px;
        font-size: 18px;
      }
      .nameIn:focus +.nameSrc{
        background-image: url("./src/pwd-icons-new.png");
        background-position-y: -48px;
      }

      .psdIn:focus +.psdSrc{
        background-image: url("./src/pwd-icons-new.png");
        background-position:-48px -48px;
      }
      .inError{
        border: solid 1px #D24844;
      }
      .srcError{
        border-right: solid 1px #D24844;
      }
    </style>
    <script>

      window.onload =function (){
        let submit = document.getElementById("submit");
        let nameIn = document.getElementById("nameIn");
        let nameSrc = document.getElementById("nameSrc");
        let nameDiv = document.getElementById("nameDiv");
        let psdIn = document.getElementById("psdIn");
        let psdDiv = document.getElementById("psdDiv");
        let psdSrc = document.getElementById("psdSrc");
        let errorHint = document.getElementById("errorHint");
        function nameTogo(){
          if (nameIn.value) {
            //  有值
            // alert("有值")
            nameDiv.classList.remove("inError")
            nameSrc.classList.remove("srcError")
          }else {
            // 没有值时，需要将输入框的边框编程红色
            // alert("没有值" )
            nameDiv.classList.add("inError")
            nameSrc.classList.add("srcError")
          }
        }
        //点击登录按钮
        submit.onclick = function () {
          nameTogo();
          psdTogo();
          if (!nameIn.value){
            // 用户名输入框没有值
            errorHint.style.visibility = "visible"
            errorHint.innerText = "请输入用户名"
          }else if (!psdIn.value){
            //密码框内没有值
            errorHint.style.visibility = "visible"
            errorHint.innerText = "请输入密码"
          }else {
            errorHint.style.visibility = "hidden"
            // 用户名和密码都不是空 发送请求到服务器 ajax
            // readyState =1;
            let xhr = new XMLHttpRequest();
            // readyState =2;  get方式的请求参数是在url地址的后面 用？链接
            // xhr.open("get", "/demo/MyServlet?" +"user="+nameIn.value + "&psd=" +psdIn.value);
            // 登录一般使用POST的方式提交请求， 参数列表会放在http协议的body内
            // 使用post方式提交数据
            xhr.open("post", "/demo/MyServlet");
            // 在使用post方式发送请求是，必须设置请求头，告诉服务器端content的类型
            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8")
            // readyState =3;
            // xhr.send("user="+nameIn.value + "&psd=" +psdIn.value);

            //json 服务器端和客户端通信是使用最多的协议
            xhr.setRequestHeader("Content-Type","application/json;charset=UTF-8")
            let jsonParams = {};
            jsonParams.user = nameIn.value;
            jsonParams.psd = psdIn.value;
            xhr.send(JSON.stringify(jsonParams));
            xhr.onreadystatechange = function () {
              if (this.readyState === 4) {
                if (this.status >=200 && this.status <300){
                  console.log("服务器响应的内容：", this.responseText);
                  let responseData = JSON.parse(this.responseText);
                  console.log("responseData 内容：", responseData);
                  if (responseData.data.succ === 1) {
                    // 登录成功，需要跳转到首页
                    nameDiv.classList.remove("inError")
                    nameSrc.classList.remove("srcError")
                    psdDiv.classList.remove("inError")
                    psdSrc.classList.remove("srcError")
                    errorHint.style.visibility = "hidden"
                    // 需要跳转到网站的首页，或者登录成功的页面
                    window.location.href = "./index.jsp";
                  }else {
                    // 登录失败，需要提醒用户重新输入
                    let msg = responseData.msg;
                    nameDiv.classList.add("inError")
                    nameSrc.classList.add("srcError")
                    psdDiv.classList.add("inError")
                    psdSrc.classList.add("srcError")
                    errorHint.style.visibility = "visible"
                    errorHint.innerText = msg;
                  }
                }
              }
            }
          }
        }
        nameIn.onfocus = function () {
          nameDiv.classList.remove("inError")
          nameSrc.classList.remove("srcError")
        }
        nameIn.onblur = function () {
          nameTogo();
        }

        function psdTogo(){
          if (psdIn.value){
            // 密码框内有值
            psdDiv.classList.remove("inError")
            psdSrc.classList.remove("srcError")
          }else {
            psdDiv.classList.add("inError")
            psdSrc.classList.add("srcError")
          }
        }
        psdIn.onfocus = function (){
          psdDiv.classList.remove("inError")
          psdSrc.classList.remove("srcError")
        }
        psdIn.onblur = function () {
          psdTogo();
        }
      }
    </script>
  </head>
  <body>
  <div id="errorHint">
    请输入账户名
  </div>

  <div id="nameDiv" class="nameDiv">
    <input id="nameIn" class="nameIn" type="text" placeholder="邮箱/账号名/登录手机" autofocus>
    <div id="nameSrc" class="nameSrc"></div>
  </div>

  <div id="psdDiv" class="psdDiv">
    <input id="psdIn" class="psdIn" type="password"  placeholder="密码">
    <div id="psdSrc" class="psdSrc"></div>
  </div>

  <div id="submit" class="submit">
    <a href="#">登录</a>

  </div>
  </body>
</html>
